<!DOCTYPE html>
<html lang="en">
    <head>
        <title>component-4 组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
    <body>
        <h1>component-4 组件</h1>
        <hr>
        <div id="app">
            <component :is="componentid"></component>
            <button @click="componentwhy">切换</button>
        </div>
        <script type="text/javascript">
            var componenta={
                template:`<div style="color:red;">I'm component A</div>`
            }
            var componentb={
                template:`<div style="color:red;">I'm component B</div>`
            }
            var componentc={
                template:`<div style="color:red;">I'm component C</div>`
            }
            var app=new Vue({
                el:'#app',
                data:{
                    componentid:'componenta'
                },
                components:{
                   'componenta':componenta,
                   'componentb':componentb,
                   'componentc':componentc
                },
                methods:{
                    componentwhy:function(){
                        switch(this.componentid){
                            case 'componenta': this.componentid='componentb';break;
                            case 'componentb': this.componentid='componentc';break;
                            case 'componentc': this.componentid='componenta';break;
                        }
                    }
                }
            })
        </script>
    </body>
</html>